import { homeAPI, DisplayQueue, DisplayQueueMember } from './hp_data.js';
// import { Homepage_Card } from './hp_card.js';
import { vns_method_to_btn_name } from './anicard.js';

export const VNS_callback = function (btn, btn_queue) {
    
}

const EL_KW_LIST = [];
export const EL_callback = function (btn, btn_queue) {
    let btn_kw_str = btn.querySelector(".filter-btn-text").innerText;
    if(btn.classList.contains("active")) {
        btn.classList.remove("active");
        console.log(`EL button\: \"${btn_kw_str}\" was filtered out.`);
        EL_KW_LIST.push(btn_kw_str);
    } else {
        btn.classList.add("active");
        console.log(`EL button\: \"${btn_kw_str}\" was reactivated.`);
        EL_KW_LIST.splice(EL_KW_LIST.indexOf(btn_kw_str), 1);
    }

    // console.log(EL_KW_LIST);
    let result;
    let display_node_list = create_display(result = homeAPI(EL_KW_LIST, false, true));
}


// card_single_subList.forEach((card_subject, i, subList) => {
//     let card_deck_selector = `#${card_subject._get_aim_deck()} > .card-deck`;
//     let aim_card_deck = document.querySelector(card_deck_selector);
//     card_subject.appendTo(aim_card_deck);
// });

// create display
const create_display = function (display_queue = new DisplayQueue("new display set")) {
    let display_node_list = [];
    let VNS_tag = display_queue.get_next_tag("head") || "tag";
    let display_member;
    let card_display_single_node;
    while (VNS_tag !== "") {
        display_member = display_queue._queue[VNS_tag][0];
        if(display_queue._queue[VNS_tag][1] > 0) {
            card_display_single_node = create_single_display(display_member);
            display_node_list.push(card_display_single_node);
        }

        VNS_tag = display_member.get_next_tag();
    }

    return display_node_list;
}

const create_single_display = function (display_member = new DisplayQueueMember()) {

    let VNS_tag = display_member.get_VNS_tag();
    let card_display_single_node = document.createElement("div");
    let card_deck_node = document.createElement("div");
    card_display_single_node.classList.add(VNS_tag);
    card_display_single_node.setAttribute("id", VNS_tag);
    card_deck_node.classList.add("row", "row-cols-1", "row-cols-sm-2", "row-cols-lg-3", "card-deck");
    card_display_single_node.appendChild(card_deck_node);

    create_cards(display_member, card_deck_node);

    display_member.appendTo(card_display_single_node, card_deck_node, vns_method_to_btn_name);
    return card_display_single_node;
}

const create_cards = function (display_member = new DisplayQueueMember(), card_deck_node = new HTMLElement()) {
    let card_subject_list = display_member._get_card_subject_list();
    card_subject_list.forEach((card_subject, i, subList) => {
        card_subject.appendTo(card_deck_node);
    });
    console.log(card_deck_node);
}